<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2022-09-21 16:32:04
 * @LastEditTime: 2022-09-22 17:47:56
 * @LastEditors: Dxcr
-->
<template>
  <div class="switchLayer_container">
    <div class="mapType">
      <div class="mapTypeCard satellite active" @click="chooseMapType(0)">
        <div class="mapTypeCard_text">卫星图</div>
      </div>
      <div class="mapTypeCard vector" @click="chooseMapType(1)">
        <div class="mapTypeCard_text">矢量图</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  defineComponent,
  ref,
  reactive,
  computed,
  toRefs,
  onMounted
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
const emit = defineEmits(["choose"])

const getRoute = useRoute()
const router = useRouter()
const data = reactive({
})
onMounted(() => {
})

function chooseMapType(index){
  emit("choose",index)
}
</script>
<style lang="scss" scoped>
.switchLayer_container {
  position: absolute;
  top: 50px;
  left: 10px;

  .mapTypeCard{
    height: 60px;
    width: 80px;
    position: absolute;
    border-radius: 2px;
    top: 10px;
    left:1px;
    border: 1px solid rgba(153,153,153,0.8);
    transition-duration: .4s;
    &:hover{
      border: 1px solid #3385FF;
    }
    .mapTypeCard_text{
      position: absolute;
      bottom: 0;
      right: 0;
      color:#fff;
      background-color: #33B2FA;
      font-size: 12px;
      padding: 3px 3px 2px 4px;
    }
  }
  .vector{
    background: url(@/assets/mapbox/images/maptype.png) no-repeat 0 0;
    background-size: 86px 240px;
    z-index: 9;

  }
  .satellite{
    background: url(@/assets/mapbox/images/maptype.png) no-repeat 0 -60px;
    background-size: 86px 240px;
    z-index: 10;
  }
}

.mapType{
  height: 80px;
  width:100px;
  cursor: pointer;
  transition-duration: .4s;
}

.mapType:hover{
  width: 190px;
}

.mapType:hover .vector{
  transform: translate(90px,0);
}

:deep {}
</style>